<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>发布管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
	<link rel="stylesheet" href="/public/res/skin/dark/darkBlue.css" type="text/css" id="cloudCss">
	<style>
		.layui-form-label {
			width: 90px;
		}

		.layui-input-block {
			margin-left: 125px;
		}

		.layui-upload-img {
			width: 420px;
			height: 92px;
			margin: 0 10px 10px 0;
		}
	</style>
</head>

<body data-background-color="dark">
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body" style="padding: 15px;">
				<form class="layui-form" action="" lay-filter="component-form-group" style="padding: 10px 0 0 0;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">所属门户网站</label>
							<div class="layui-input-block">
								<select name="city" lay-verify="required">
									<option value=""></option>
									<option value="0">监督指挥公众服务门户网站</option>
									<option value="1">社会治安综合治理公众服务门户网站</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">所属栏目</label>
							<div class="layui-input-block">
								<select name="classify" lay-filter="classify">
									<option value=""></option>
									<option value="0" title="2">新闻动态</option>
									<option value="1" title="1">政务公开</option>
									<option value="2" title="3">案件公示</option>
									<option value="3" title="1">督查督办</option>
									<option value="4" title="4">友情链接</option>
									<option value="5" title="5">联系方式</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">文章标题</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入文章标题"
									class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn"><i class="layui-icon">&#xe615;</i>查询</button>
						</div>
					</div>
				</form>
				<hr>
				<div class="layui-btn-group demoTable" style="margin-bottom: 5px;">
					<button class="layui-btn layui-btn-primary " data-type="add"><i class="layui-icon">&#xe654;</i>新增</button>
					<button class="layui-btn layui-btn-primary "><i class="layui-icon">&#x1006;</i>批量禁用</button>
					<button class="layui-btn layui-btn-primary "><i class="layui-icon">&#xe605;</i>批量启用</button>
					<!--<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
					  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
					  <button class="layui-btn" data-type="isAll">验证是否全选</button>-->
				</div>
				<table class="layui-table"
					lay-data="{cellMinWidth: 80,height:472, url:'./data/release.json', page:true, id:'idTest'}" lay-filter="demo">
					<thead>
						<tr>
							<th lay-data="{type:'checkbox'}"></th>
							<th lay-data="{field:'id', width:80, sort: true}">编号</th>
							<th lay-data="{field:'portal', width:220}">所属门户</th>
							<th lay-data="{field:'grade', width:250}">栏目模块</th>
							<th lay-data="{field:'title', width:250}">文章标题</th>
							<th lay-data="{field:'date',width:420, }">发布日期</th>
							<th lay-data="{ align:'center', toolbar: '#barDemo'}">操作</th>
						</tr>
					</thead>
				</table>
				<script type="text/html" id="barDemo">
					  <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe63c;</i>详情</a>
					  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
					  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
					</script>
			</div>
		</div>
	</div>
	<script src="../../layuiadmin/layui/layui.js"></script>
	<script>
		layui.use(['form', 'table', 'upload'], function () {
			var form = layui.form;
			var table = layui.table;
			var $ = layui.jquery
				, upload = layui.upload;


			//监听表格复选框选择
			table.on('checkbox(demo)', function (obj) {
				console.log(obj)
			});
			//监听工具条
			table.on('tool(demo)', function (obj) {
				var data = obj.data;
				if (obj.event === 'detail') {
					layer.msg('ID：' + data.id + ' 的查看操作');
				} else if (obj.event === 'del') {
					layer.confirm('真的删除行么', function (index) {
						obj.del();
						layer.close(index);
					});
				} else if (obj.event === 'edit') {
					layer.alert('编辑行：<br>' + JSON.stringify(data))
				}
			});

			var $ = layui.$, active = {
				getCheckData: function () { //获取选中数据
					var checkStatus = table.checkStatus('idTest')
						, data = checkStatus.data;
					layer.alert(JSON.stringify(data));
				}
				, getCheckLength: function () { //获取选中数目
					var checkStatus = table.checkStatus('idTest')
						, data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
				}
				, isAll: function () { //验证是否全选
					var checkStatus = table.checkStatus('idTest');
					layer.msg(checkStatus.isAll ? '全选' : '未全选')
				}
			};

			$('.demoTable .layui-btn').on('click', function () {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});


			$('[data-type="add"]').on('click', function () {
				layer.open({
					type: 2,
					area: ['1000px', '500px'],
					fixed: false, //不固定
					maxmin: true,
					content: 'relDetail.html'
				});
			});
		});
	</script>
</body>

</html>